// 判断是否登录决定顶部的登录状态

if (getCookie("nickname")) {
    document.querySelector(".cart").style.background = "rgb(255,103,0)"
    document.querySelector(".cart span").style.color = "white"
    document.querySelector(".iconcart").style.color = "white"
    document.querySelector(".login").style.display = "none"
    document.querySelector(".regist").style.display = "none"
    document.querySelector(".li_user").style.display = "block"
    document.querySelector(".order").style.display = "block"
    document.querySelector(".exit").style.display = "block"
}
else {
    document.querySelector(".ul2").style.marginLeft = "200px";
    document.querySelector(".order").style.display = "none"
    document.querySelector(".li_user").style.display = "none"
    document.querySelector(".exit").style.display = "none"

}
// 是否完成登录显示用户名
let nickname = getCookie("nickname") ? JSON.parse(getCookie("nickname")) : null;
if (nickname) {
    document.querySelector(".li_user").innerHTML = `${nickname.nickname}`

} else {
    document.querySelector(".li_user").innerHTML = "没有值"
}
// 点击退出登录删除cookie事件

document.querySelector(".exit").onclick = function (e) {
    // console.log(111);
    setCookie("nickname", "", -1);//去除cookie
    e.stopPropagation(); //阻止冒泡
}


// layui轮播图引入
layui.use('carousel', function () {
    var carousel = layui.carousel;
    //建造实例
    carousel.render({
        elem: '#test1',
        width: '100%' //设置容器宽度
        ,
        arrow: 'always' //始终显示箭头
        ,
        anim: 'anim' //切换动画方式
        ,
        autoplay: 'false'
    });
});
// 轮播图接口

ajax({
    url: "http://phpclub.org.cn:8080/api//system/homeSlide",
    success: function (response) {
        // console.log(response.data)
        // let html = '';
        let bannerlist = document.querySelectorAll(".banner_1 div")
        for (let ele in response.data) {
            // console.log(ele)
            bannerlist[ele].innerHTML = `<img src="${response.data[ele].imgUrl}" >`
            // console.log(response.data[ele].imgUrl);
            // html += `<div class><img src="${response.data[ele].imgUrl}" ></div>`
        }
    }
})

// 分类获取 左侧导航栏接口
ajax({
    url: "http://phpclub.org.cn:8080/api/system/category",
    success: function (response) {
        console.log(response.data);

        let banner_nav = document.querySelector(".banner_nav")
        let html = ''
        response.data.forEach(ele => {

            console.log(ele.children);
            // 二级导航
            let temp = ''
            ele.children && ele.children.forEach(ele => {
                temp += `
                <div menu_dad>

                <div class="menu">
                <img src="${ele.icon}">
                <div class="text">${ele.cateName}</div>
            </div>

            </div>
                `
                ele.children && ele.children.forEach(ele => {
                    // 三级导航 从里往外写
                    temp += `
                    
                    <div class="menu_son">
                    <img src="${ele.icon}">
                    <tr>

                    <div class="text">${ele.cateName}</div>
                </div>
                    `
                })
            })

            html += `
            <li><a href="#">${ele.cateName}<span>></span></a>
                        <div class="column">
                        ${temp}
                        </div>
                    </li>
            `
        });
        banner_nav.innerHTML = `<ul>${html}</ul>`

    }
})

// 首页推荐商品
ajax({
    url: "http://phpclub.org.cn:8080/api/system/recommend",
    success: function (response) {
        console.log(response.data);
        let ulList = document.querySelector(".nav_ul")

        let liList = document.querySelectorAll(".nav_son")
        // console.log(liList);

        for (let index in response.data) {

            // 将点击的商品ID加在地址栏
            let temp = '';
            response.data[index].forEach(function (item, i) {
                temp += `
                <a href="detail.html?id=${item.id}">

                <div class="nav_grandson">
                <img src="${item.goodsImg}" alt="">
                <div class="title">${item.goodsName}</div>
                <p class="price">${item.shopPrice}</p>
                </div>
                </a>
                `
            });
            liList.forEach(function (item, i) {
                console.log(response.data);
                console.log(response.data);item.innerHTML = temp
            })
        }

    }

})



